<template>
    <div class="brand-show">
        <!-- 轮播图片 -->
        <el-carousel
            ref="brandCarousel"
            indicator-position="none"
            arrow="never"
            trigger="hover"
            height="4.64rem"
            class="brand-carousel"
            :autoplay="false"
            @change="fnOnIndexChange"
        >
            <el-carousel-item
                v-for="(brand, bIndex) in brandList"
                :key="bIndex"
            >
                <div class="brand">
                    <div class="brand-head">事业部故事</div>
                    <div class="brand-main">
                        <div class="brand-left">
                            <div class="brand-title">
                                {{ brand.brand_title }}
                            </div>
                            <!-- // eslint-disable-next-line prettier/prettier -->
                            <pre class="brand-summary">{{
                                brand.brand_info
                            }}</pre>
                            <div class="brand-company">
                                <div class="brand-company-name">
                                    {{ brand.company_name }}
                                </div>
                                <div class="brand-company-cate">
                                    {{ brand.category_title
                                    }}{{
                                        brand.sub_category_title
                                            ? '/' + brand.sub_category_title
                                            : ''
                                    }}
                                </div>
                            </div>
                        </div>
                        <div
                            class="brand-right"
                            :style="{
                                backgroundImage:
                                    'url(' + brand.brand_cover + ')'
                            }"
                        ></div>
                    </div>
                </div>
            </el-carousel-item>
        </el-carousel>
        <ul class="indicators">
            <li
                v-for="(brand, bIndex) in brandList"
                :key="bIndex"
                class="indicator-wrap"
                :class="{ active: currentIndex == bIndex }"
                @click="fnChangeIndex(bIndex)"
            >
                <div class="indicator"></div>
            </li>
            <li v-if="showMore">
                <a
                    class="btn-more"
                    href="javascript:;"
                    @click="fnGoPage('/brands')"
                    >查看更多</a
                >
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        showMore: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            currentIndex: 0,
            brandList: []
        }
    },
    created() {
        if (!process.server) {
            this.getBrandList()
        }
    },
    methods: {
        fnGoPage(path) {
            this.$router.push({
                path
            })
        },
        fnChangeIndex(index) {
            // this.functionCurrent = index
            this.$refs.brandCarousel.setActiveItem(index)
        },
        fnOnIndexChange(index) {
            this.currentIndex = index
        },
        getBrandList() {
            this.$post('/Brand/getList', {
                status: 1
            }).then((resp) => {
                if (resp.code == 1) {
                    this.brandList = resp.data.list
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.brand-show {
    width: 100%;
}
.brand-carousel {
    width: 100%;
}
.brand {
    width: 12rem;
    height: 4.64rem;
    margin: 0 auto;
    position: relative;
    margin-top: 0.16rem;
}
.brand-head {
    position: absolute;
    width: 204px;
    height: 48px;
    left: 0;
    top: 0;
    z-index: 10;
    background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/brand_logo.png);
    background-position: left top;
    background-size: contain;
    background-repeat: no-repeat;
    color: rgba(250, 250, 250, 1);
    font-size: 16px;
    line-height: 48px;
    box-sizing: border-box;
    padding-left: 44px;
}
.brand-main {
    height: 4.2rem;
    width: 100%;
    position: relative;
    top: 22px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #fff;
    box-sizing: border-box;
    .brand-right {
        width: 38%;
        height: 0;
        padding-top: 30%;
        background-color: #f4f4f4;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .brand-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0 10%;
        box-sizing: border-box;
    }
    .brand-title {
        height: 0.4rem;
        font-size: 0.4rem;
        font-weight: 400;
        color: rgba(29, 32, 35, 1);
        line-height: 0.4rem;
        text-align: left;
    }
    .brand-summary {
        margin-top: 0.24rem;
        width: 5.06rem;
        max-height: 1.9rem;
        font-size: 16px;
        font-weight: 400;
        color: rgba(136, 144, 156, 1);
        line-height: 0.24rem;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 8;
        letter-spacing: 0;
        text-align: justify;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    .brand-company {
        margin-top: 0.34rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        &-name {
            font-size: 0.16rem;
            font-weight: 400;
            color: rgba(136, 144, 156, 1);
            line-height: 0.22rem;
            margin-right: 0.24rem;
        }
        &-cate {
            font-size: 0.16rem;
            font-weight: 400;
            color: rgba(136, 144, 156, 1);
            line-height: 0.22rem;
        }
    }
}
// <ul class="indicators">
//     <li
//         v-for="(brand, bIndex) in brandList"
//         :key="bIndex"
//         class="indicator"
//     ></li>
//     <li><a class="btn-more" href="javascript:;">查看更多</a></li>
// </ul>
.indicators {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.indicator-wrap {
    width: 30px;
    height: 16px;
    margin: 0 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &:hover {
        .indicator {
            background: #fff;
        }
    }
    &.active {
        .indicator {
            background: #fff;
        }
    }
}
.indicator {
    background: rgba(250, 250, 250, 0.5);
    border-radius: 3px;
    display: block;
    width: 30px;
    height: 2px;
    border: none;
    outline: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: 0.3s;
}
.btn-more {
    width: 64px;
    height: 16px;
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 187, 255, 1);
    line-height: 16px;
    margin: 0 8px;
    &:hover {
        text-decoration: underline;
    }
}
</style>
